<template>
<div class="logincom">
    <div class="sf">
      <form @submit="login()">
  <ul>
    <li><p>登录页面</p>  </li>
    <li>  账号：<input type="text" class="inp" v-model.lazy.trim="username"/>   </li> 

    <li>密码：<input type="passwork" class="inp" v-model.lazy.trim="pwd"/></li>  

    <li class="jzmm"><input type="checkbox" class="jz" v-model="isRem">记住密码</li>

    <li> <input type="submit" value="登录" class="dl"> </li>
  </ul>
  </form>
    </div>
</div>

</template>

<!-- 脚本 -->
<script>
export default {
  name:"LoginCom",
  // data函数，存储组件的数据
  data(){
    return{
      username:'',
      pwd:'',
      isRem:false, //false:默认不勾选
    }
  },
 methods:{
  login(){
    const user =[
      {username:'admin1',pwd:123456},
      {username:'admin2',pwd:987654},
      {username:'admin3',pwd:123789},
      {username:'admin4',pwd:987321},
      {username:'admin5',pwd:654321},
  ];
  //  for(let a in user){
  //   if(this.username==user[a].username && this.pwd==user[a].pwd){
  //     sessionStorage.setItem('islogin','true')
  //     this.$router.push('/home')
  //   }

  //  }
  // 根据输入框输入的账号和密码，如果输入的数据跟上面数组中的任意一组数组匹配,
  // 登录成功：1.记录登录状态到本地存储sessionStorage  2.跳转到首页

  let result =user.filter(item=>{
    return item.username == this.username && item.pwd == this.pwd
  });
  console.log(result);
  
  if(result.length==1){
    sessionStorage.setItem('islogin','true')
      this.$router.push('/home')
  }
  else{
          alert("登录失败");
  }
}
}
}
</script>

<style scoped>
.logincom{
  width: 100%;
  height: 98vh;
  overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sf{
    width:300px;
    height:300px;
    border: 1px solid red;
    text-align: center;
    background-color: #34a784;
    
}
ul{
width: 250px;
  margin-top: 60px;
  line-height: 30px;
}
.dl{
  width: 120px;
  height: 30px;
  border-radius: 6px;
  border: none;
}

.inp{
    height: 20px;
    border-radius: 6px;
  border: none;
}
.jzmm{
      text-align: left;
}
</style>
